<template>
    <div>
        <header>
            <input type="text" placeholder="搜索">
            <div>点赞</div>
            <div>评价{{ (list.info && list.info.wmPoiScore * 10) }}</div>
            <div>商家</div>
        </header>
        <main>
            <ul class="left">
                <li @click="dianji(index)" v-for="(item, index) in list.taglist && list.taglist" :key="index" :class="(xiabiao==index)?'zhuangtai' :'' ">{{
                        item.name
                }}</li>
            </ul>
            <ul class="right">
                <li v-for="(item, index) in list.taglist[xiabiao] && list.taglist[xiabiao].goodlist" :key="index">
                    <div class="tu">
                        <img :src="item.picture" alt="">
                    </div>
                    <div class="text">
                        <div>{{ item.name }}</div>
                        <section>{{ item.month_saled_content }}</section>
                        <span class="money">¥{{ item.min_price }}</span><button>+</button>
                    </div>
                </li>
            </ul>
        </main>
    </div>
</template>

<script>

import { xiangQing } from '../api'

export default {
    data() {
        return {
            xiabiao: 0,
            list: {},
        }
    },
    mounted() {
        xiangQing({ id: this.$route.params.id }).then((res) => {
            console.log(res.data.shopinfo);
            this.list = res.data.shopinfo
        })
    },
    methods: {
        dianji(index) {
            this.xiabiao = index
        }
    }
}
</script>

<style scoped>
.zhuangtai{
    color: red;
    font-weight: 700;
}
header {
    display: flex;
}

header input {
    width: 40px;
    margin: 20px;
}

header div {
    margin: 20px;
}

main {
    display: flex;
}

main .left {
    margin-left: 15px;
}

main .right {
    margin-top: 30px;
    margin-left: 20px;
    font-size: 14px;
}

main .left li {
    margin-top: 20px;
    font-size: 16px;
}

main .right {
    margin-right: 10px;
    flex: 1;
}

main .right li {
    display: flex;
    margin-bottom: 15px;
}

main .right li div {
    margin-left: 10px;
}

main .right li .tu {
    width: 80px;
    height: 80px;
    background-color: aqua;
}

main .right li .tu img {
    width: 100%;
}

main .right li button {
    margin-left: 180px;
    width: 30px;
}

.zhuangtai {
    color: red;
    font-weight: 700;
}

main .right .xianshi {
    display: flex;
}

main .right .yincang {
    display: none;
}
</style>